<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-table :data="tableData.data" ref="tableRef" row-key="Id" border @selection-change="(selection:any[])=>tableData.selection=selection">
			<el-table-column prop="Title" label="菜单标题"></el-table-column>
			<el-table-column prop="Type" label="菜单类型"></el-table-column>
			<el-table-column prop="IsHide" label="是否隐藏"></el-table-column>
			<el-table-column label="选择" width="70" align="center">
				<template #default="scope">
					<el-checkbox v-model="scope.row.IsAuth" size="large" @change="onSelect(scope.row)" />
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref,ref } from 'vue';
import { Post } from '/@/common/http';
import EMsg from '/@/common/eMsg';

const dialogShow = ref(false);
const tableRef = ref();
const tableData: Ref = ref({
	data: [],
	selection: [],
	total: 0,
});
let roleId: number;
const onShow = (id: number) => {
	dialogShow.value = true;
	roleId = id;
	Post('SysRole/GetRoleTreeMenu', { RoleId: id }, (res: any) => {
		tableData.value.data = res.Data;
	});
};
const onClose = () => {
	tableData.value.data = [];
	dialogShow.value = false;
};
const onSubmit = () => {
	let data: any[] = [];
	const selection = getSelection();
	if (selection.length == 0) {
		EMsg.error('未设置任何权限');
		return;
	}
	selection.forEach((s) => data.push({ RoleId: roleId, MenuId: s.Id }));
	Post('SysRole/SetRoleMenu', data, (res: any) => {
		EMsg.success(res.Msg);
	});
};

const onSelect = (row: any) => {
	//选中/取消所有子元素
	if (row.children?.length > 0) {
		selectChildren(row.children, row.IsAuth);
	}

	let select = row;
	while (select.ParentId > 0) {
		let parent: any = getParent(select, tableData.value.data);
		if (parent) {
			if (row.IsAuth) {
				//子元素选中时同时勾选父元素
				parent.IsAuth = row.IsAuth;
			} else {
				//子元素全部取消时取消父元素
				if (!parent.children.some((s: any) => s.IsAuth)) {
					parent.IsAuth = row.IsAuth;
				}
			}
			select = parent;
		}
	}
};

const getParent = (child: any, data: any[]) => {
	let parent: any = data.find((s: any) => s.Id == child.ParentId);
	if (!parent) {
		for (let index = 0; index < data.length; index++) {
			parent = getParent(child, data[index].children);
			if (parent) break;
		}
	}
	return parent;
};

const selectChildren = (children: any[], isCheck: boolean) => {
	for (let index = 0; index < children?.length; index++) {
		children[index].IsAuth = isCheck;
		selectChildren(children[index].children, isCheck);
	}
};

const getSelection = () => {
	const selection: any[] = [];
	const getRecursion = (data: any[]) => {
		for (let index = 0; index < data.length; index++) {
			if (data[index].IsAuth) {
				selection.push(data[index]);
				if (data[index].children?.length > 0) {
					getRecursion(data[index].children);
				}
			}
		}
	};
	getRecursion(tableData.value.data);
	return selection;
};

defineExpose({
	onShow,
});
</script>
